import React from 'react';
import {SafeAreaView, ScrollView, useColorScheme, View} from 'react-native';
import {DeviceAuthListView} from 'TPL/linc';
import {DarkTheme, DefaultTheme} from '@react-navigation/native';
import {DeviceAuthDevicePlatform} from 'TPL/linc/DeviceAuthListView';

function DeviceList(): JSX.Element {
  const theme = useColorScheme() === 'dark' ? DarkTheme : DefaultTheme;
  const backgroundStyle = {
    backgroundColor: theme.colors.background,
  };

  return (
    <SafeAreaView style={backgroundStyle}>
      <ScrollView
        contentInsetAdjustmentBehavior="automatic"
        style={backgroundStyle}>
        <View
          style={[
            {
              paddingHorizontal: 10,
              paddingVertical: 10,
            },
            backgroundStyle,
          ]}>
          <DeviceAuthListView
            theme={theme}
            items={[
              {
                id: 1,
                deviceName: '我的iphone 13 (当前设备)',
                platform: DeviceAuthDevicePlatform.iphone,
                lastUseTime: '2023-10-30',
              },
              {
                id: 2,
                deviceName: 'xiaomi 11',
                platform: DeviceAuthDevicePlatform.android,
                lastUseTime: '2023-10-30',
              },
              {
                id: 3,
                deviceName: 'redmi K60',
                platform: DeviceAuthDevicePlatform.android,
                lastUseTime: '2023-10-30 01:01:00',
              },
            ]}
            confirm={item => {
              console.log(item);
            }}
          />
          <DeviceAuthListView
            theme={theme}
            title={'待授权列表'}
            items={[
              {
                id: 4,
                deviceName: '我的iphone 16',
                platform: DeviceAuthDevicePlatform.iphone,
                lastUseTime: '2023-11-30 12:45:32',
              },
            ]}
            confirm={item => {
              console.log(item);
            }}
          />
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

export default DeviceList;
